<template>
	<view>
		<view class="goodes_detail_swiper-box" v-if="carouselFigurePhotos && carouselFigurePhotos.length>0">
			<!-- 详情轮播 -->
			<swiper class="carousel" circular @change="swiperChange" :autoplay="true">
				<swiper-item 
					v-for="(img, index) in carouselFigurePhotos" :key="index" class="carousel-item">
					<image class="swiper-image shopro-selector-rect" :src="img" mode="aspectFill" lazy-load>
					</image>
				</swiper-item>
			</swiper>
			<view v-if="carouselFigurePhotos" class="swiper-dots">{{ swiperCurrent + 1 }} /
				{{ carouselFigurePhotos.length }}
			</view>
		</view>
		<view class="goodes_detail_swiper-box" v-else>
			<!-- 详情轮播 -->
			<swiper class="carousel" circular :autoplay="true">
				<swiper-item class="carousel-item">
					<image class="swiper-image shopro-selector-rect" :src="noPic" mode="aspectFill" lazy-load>
					</image>
				</swiper-item>
			</swiper>
			<view  class="swiper-dots">1/1
			</view>
		</view>
	</view>
</template>

<script>
	import conf from '@/conf/config.js';
	export default {
		name:"goodsPhoto",
		data() {
			return {
				swiperCurrent: 0, //轮播下标
				noPic:conf.commonBaseUrl+'h5/static/noPic.png'
			};
		},
		props:{
			carouselFigurePhotos:{
				type:Array,
			}
		},
		methods:{
			// 轮播图切换
			swiperChange: function(e) {
				const index = e.detail.current;
				this.swiperCurrent = index;
			},
		}
	}
</script>

<style lang="scss">

	.goodes_detail_swiper-box {
		width: 100%;
		height: 500rpx;
		position: relative;

		.carousel {
			width: 100%;
			height: 100%;
		}

		.carousel-item {
			width: 750rpx;
			height: 100%;
		}

		.swiper-image {
			width: 750rpx;
			height: 100%;
			background: #ccc;
		}

		.swiper-dots {
			display: flex;
			position: absolute;
			right: 20rpx;
			bottom: 20rpx;
			line-height: 44rpx;
			border-radius: 22rpx;
			padding: 0 15rpx;
			background: rgba(#333, 0.3);
			font-size: 24rpx;
			color: rgba(#fff, 0.9);
		}
	}
</style>